import React, { Component } from 'react';
import { Provider } from 'react-redux';
import ReactDOM from 'react-dom';
import { randomKey } from '../../utils/utils';
import store from '../../model/index';
import { ConfigProvider, Button, Icon } from 'antd';

import zhCN from 'antd/es/locale/zh_CN';
import './index.less';
const defaultOptions = {
  show: false,
  title: 'modal',
  okTxt: '确定',
  isOkBtn: true,
  cancelTxt: '取消',
  isCancelBtn: true,
  width: 500,
  maskClosable: true,
  error: false,
  isConfirm: false,
  ok: () => {
    console.log('ok');
  },
  cancel: () => {
    console.log('cancel');
  },
  content: 'some text',
  bgClickFlase: true,
};
export class TantuterModal extends Component {
  constructor() {
    super();
    this.state = {
      models: [],
    };
  }
  open(options) {
    const { models } = this.state;
    defaultOptions.show = true;
    const current = {
      ...defaultOptions,
      key: randomKey(),
      ...options,
    };
    this.setState({
      show: true,
      models: models.concat([current]),
    });

    // 去掉滚动条
    document.body.style.position = 'reletive';
    document.body.style.overflow = 'hidden';
    if (document.body.scrollHeight > window.innerHeight) {
      document.body.style.width = 'calc(100% - 15px)';
    }
    return current.key;
  }

  findThis(key) {
    return this.state.models.find((item) => {
      return item.key === key;
    });
  }
  ok(key) {
    const current = this.findThis.bind(this, key)();
    current.ok();
  }
  cancel(key) {
    const current = this.findThis.bind(this, key)();
    current.cancel();
    this.close(key);
  }
  close(key) {
    if (key) {
      const current = this.state.models.find((item) => item.key === key);
      if (!current) {
        console.error('看起来找不到窗口id' + key);
      } else {
        current.show = false;
      }
    }
    this.setState({
      models: key ? this.state.models : [],
    });
    document.body.style.position = 'staic';
    document.body.style.overflow = 'auto';
    if (document.body.scrollHeight > window.innerHeight) {
      document.body.style.width = 'auto';
    }
  }
  maskClose(key) {
    const current = this.findThis.bind(this, key)();
    if (current.maskClosable) {
      this.close.bind(this, key)();
    }
  }
  render() {
    const { models } = this.state;
    return (
      <ConfigProvider locale={zhCN}>
        <Provider store={store}>
          {models.map((item) => {
            const width = typeof item.width === Number ? item.width + 'px' : item.width;
            const hasFooter = item.isOkBtn || item.isCancelBtn;
            const modelConClassName = hasFooter ? 'modal-con' : 'modal-con-wp';
            const titleClass = item.error ? 'error' : '';
            let _content;
            if (typeof item.content !== 'object') {
              _content = item.content;
            } else {
              if (typeof item.content.type !== 'string') {
                _content = React.cloneElement(item.content, {
                  modelId: item.key,
                });
              } else {
                _content = item.content;
              }
            }
            if (item.show) {
              return (
                <div className='tantuer tantuer-modal' key={item.key}>
                  <div className='bg' onClick={() => !item.bgClickFlase && this.maskClose(item.key)} />
                  <div className='inner tantuer-modal-inner' style={{ width: width }} id={item.key}>
                    <div className='inner-main'>
                      <div className='modal-hd'>
                        <h3 className={titleClass}>{item.title}</h3>

                        <Icon type='close' onClick={this.close.bind(this, item.key)} style={{ fontSize: '16px' }} />
                      </div>
                      <div className={modelConClassName} style={item.isConfirm ? { marginTop: '-30px' } : null}>
                        {item.isConfirm && <h3 className='del-confirm'>警告</h3>}
                        {_content}
                      </div>
                      {item.isOkBtn || item.isCancelBtn ? (
                        <div className={item.isConfirm ? 'modal-ft modal-ft-confirm' : 'modal-ft'}>
                          {item.isCancelBtn && (
                            <Button
                              autoFocus={!item.isOkBtn}
                              className='modal-cancel mr-10'
                              onClick={this.cancel.bind(this, item.key)}
                            >
                              {item.cancelTxt}
                            </Button>
                          )}
                          {item.isOkBtn && (
                            <Button
                              type='primary'
                              className='modal-ok'
                              onClick={this.ok.bind(this, item.key)}
                              autoFocus={item.isOkBtn}
                            >
                              {item.okTxt}
                            </Button>
                          )}
                        </div>
                      ) : null}
                    </div>
                  </div>
                </div>
              );
            } else {
              return null;
            }
          })}
        </Provider>
      </ConfigProvider>
    );
  }
}

let div = document.createElement('div');
document.body.appendChild(div);
let Modal = ReactDOM.render(React.createElement(TantuterModal), div);
export default Modal;
